@import "_loginImport";

body {
  background: #F5F5F5;
  position: relative;
}

header {
  @include size(353rem, 34rem);
  margin: getRemNum(20rem) auto 0;
  @include flex(space-between, center);


  .logo {
    @include size(75rem, 33rem);
    background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/SHOW%403x.png") no-repeat center center;
    background-size: contain;
  }

  .school-year {
    @include size(44rem, 34rem);
    background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/ClassificationButton%403x.png") no-repeat center center;
    background-size: contain;
  }
}

.container {
  width: getRemNum(375rem);
  min-height: getRemNum(666rem);
  margin: getRemNum(24rem) auto 0;
  padding: 0 getRemNum(16rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .no-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: getRemNum(628rem);
    color: #D8D8D8;
    font-size: getRemNum(16rem);
    letter-spacing: getRemNum(0.6rem);
    font-family: PingFangSC-Regular, PingFang SC;

    section {
      width: getRemNum(38rem);
      height: getRemNum(38rem);
      background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/emoticon%403x.png") no-repeat;
      background-size: contain;
      margin-bottom: getRemNum(6rem);
    }
  }

  .user-dynamic {
    width: getRemNum(343rem);
    max-height: getRemNum(515rem);
    background: #FFFFFF;
    border-radius: getRemNum(12rem);
    margin-bottom: getRemNum(14rem);
    padding: getRemNum(21rem) getRemNum(21rem) getRemNum(23em);
    box-sizing: border-box;

    .user-dynamic-information {
      height: getRemNum(48.09rem);
      @include flex(space-between, center);

      .user-dynamic-information-headImg {
        width: getRemNum(48rem);
        height: getRemNum(48.09rem);
        border-radius: getRemNum(33rem);
        overflow: hidden;

        p {
          @include size(48.09rem, 48rem);
          color: #FFF;
          background: #89B1FF;
          line-height: getRemNum(48rem);
          text-align: center;
          border-radius: getRemNum(30rem);
          font-size: getRemNum(18rem);
          font-weight: bold;
          letter-spacing: getRemNum(1rem);
          font-family: PingFangSC-Medium, PingFang SC;
        }

        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }

      .user-dynamic-release-information {
        width: getRemNum(241rem);
        height: getRemNum(43rem);
        @include flex(space-between, normal);
        flex-direction: column;


        .user-dynamic-release-information-details {
          @include flex(space-between, normal);
          line-height: getRemNum(18rem);

          .user-dynamic-release-information-name {
            font-family: PingFangSC-Medium, PingFang SC;
            color: #161516;
            font-size: getRemNum(16rem);
            width: getRemNum(166rem);
            font-weight: bold;
          }

          .user-dynamic-release-information-address {
            font-size: getRemNum(10rem);
            color: #999999;
            font-family: PingFangSC-Regular, PingFang SC;
            white-space: nowrap;
            @include flex(space-between, center);

            .user-dynamic-irelease-nformation-address-icon {
              margin: 0 getRemNum(3rem) 0 getRemNum(11rem);
              @include size(12rem, 12rem);
              background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Shape%403x.png") no-repeat center center;
              background-size: contain;
            }
          }
        }

        .user-dynamic-release-information-time {
          color: #999999;
          font-size: getRemNum(12rem);
          letter-spacing: getRemNum(0.6rem);
          font-family: PingFangSC-Regular, PingFang SC;
        }
      }
    }

    .user-dynamic-keywords {
      height: getRemNum(17rem);
      margin: getRemNum(12rem) 0 getRemNum(4rem);
      line-height: getRemNum(17rem);
      font-size: getRemNum(12rem);
      color: #89B1FF;
      font-family: PingFangSC-Regular, PingFang SC;

      span {
        margin-right: getRemNum(4rem);
      }
    }

    .user-dynamic-content {
      font-family: PingFangSC-Regular, PingFang SC;
      width: getRemNum(301rem);
      max-height: getRemNum(44rem);
      letter-spacing: getRemNum(10px);
      line-height: getRemNum(22rem);
      font-size: getRemNum(13rem);
      color: #333333;
      margin-bottom: getRemNum(8rem);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .user-dynamic-images {
      width: getRemNum(301rem);
      max-height: getRemNum(286rem);
      overflow: hidden;
      border-radius: getRemNum(12rem);

      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }

    .user-dynamic-operation {
      height: getRemNum(36rem);
      border-top: solid 1px rgba(216, 216, 216, 0.59);
      @include flex(space-between, normal);
      align-items: flex-end;
      margin-top: getRemNum(16rem);

      & > section {
        height: getRemNum(20rem);
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .user-dynamic-operation-like {
        .user-dynamic-operation-like-icon {
          @include size(17rem, 14.03rem);
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/greylike.png") no-repeat center center;
          background-size: contain !important;
        }

        p {
          margin-left: getRemNum(7rem);
        }
      }

      .user-dynamic-operation-browse {
        .user-dynamic-operation-browse-icon {
          @include size(18rem, 14rem);
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/browse%403x.png") no-repeat center center;
          background-size: contain;
        }

        p {
          margin-left: getRemNum(6rem);
        }
      }

      .user-dynamic-operation-transpond {
        .user-dynamic-operation-transpond-icon {
          @include size(16rem, 18rem);
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/transpond%403x.png") no-repeat center center;
          background-size: contain;
        }

        p {
          margin-left: getRemNum(8rem);
        }
      }

      p {
        line-height: getRemNum(20rem);
        color: #999;
        font-size: getRemNum(14rem);
        font-family: PingFangSC-Regular, PingFang SC;
      }
    }
  }

  .user-dynamic-text {
    width: getRemNum(343rem);
    max-height: getRemNum(220rem);
    margin-bottom: getRemNum(14rem);
    background: #fff;
    border-radius: getRemNum(12rem);
    padding: getRemNum(21rem) getRemNum(21rem) getRemNum(23em);
    box-sizing: border-box;

    .user-dynamic-text-information {
      height: getRemNum(48.09rem);
      @include flex(space-between, center);

      .user-dynamic-text-information-headImg {
        @include size(48.09rem, 48rem);
        border-radius: getRemNum(33rem);
        overflow: hidden;

        p {
          @include size(48.09rem, 48rem);
          color: #FFF;
          background: #89B1FF;
          line-height: getRemNum(48rem);
          text-align: center;
          border-radius: getRemNum(30rem);
          font-size: getRemNum(18rem);
          font-weight: bold;
          letter-spacing: getRemNum(1rem);
          font-family: PingFangSC-Medium, PingFang SC;
        }

        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }

      .user-dynamic-text-release-information {
        width: getRemNum(241rem);
        height: getRemNum(43rem);
        @include flex(space-between, normal);
        flex-direction: column;

        .user-dynamic-text-release-information-details {
          @include flex(space-between, normal);
          line-height: getRemNum(18rem);

          .user-dynamic-text-release-information-name {
            font-family: PingFangSC-Medium, PingFang SC;
            color: #161516;
            font-size: getRemNum(16rem);
            width: getRemNum(166rem);
            font-weight: bold;
          }

          .user-dynamic-text-release-information-address {
            font-size: getRemNum(10rem);
            color: #999999;
            font-family: PingFangSC-Regular, PingFang SC;
            display: flex;
            justify-content: space-between;
            align-items: center;
            white-space: nowrap;

            .user-dynamic-text-irelease-nformation-address-icon {
              margin: 0 getRemNum(3rem) 0 getRemNum(11rem);
              @include size(12rem, 12rem);
              background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Shape%403x.png") no-repeat center center;
              background-size: contain;
            }
          }
        }

        .user-dynamic-text-release-information-time {
          color: #999999;
          font-size: getRemNum(12rem);
          letter-spacing: getRemNum(0.6rem);
        }
      }
    }

    .user-dynamic-text-keywords {
      height: getRemNum(17rem);
      margin: getRemNum(12rem) 0 getRemNum(4rem);
      line-height: getRemNum(17rem);
      font-size: getRemNum(12rem);
      color: #89B1FF;
      font-family: PingFangSC-Regular, PingFang SC;

      span {
        margin-right: getRemNum(4rem);
      }
    }

    .user-dynamic-text-content {
      width: getRemNum(301rem);
      max-height: getRemNum(44rem);
      line-height: getRemNum(22rem);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;

      p {
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333333;
        font-size: getRemNum(13rem);
      }
    }

    .user-dynamic-text-operation {
      height: getRemNum(36rem);
      border-top: solid 1px rgba(216, 216, 216, 0.59);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: getRemNum(16rem);
      color: #999999;
      font-family: PingFangSC-Regular, PingFang SC;

      & > section {
        height: getRemNum(20rem);
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .user-dynamic-text-operation-like {
        .user-dynamic-text-operation-like-icon {
          @include size(17rem, 14.03rem);
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/greylike.png") no-repeat center center;
          background-size: contain !important;
        }

        p {
          margin-left: getRemNum(7rem);
        }
      }

      .user-dynamic-text-operation-browse {
        .user-dynamic-text-operation-browse-icon {
          @include size(18rem, 14rem);
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/browse%403x.png") no-repeat center center;
          background-size: contain;
        }

        p {
          margin-left: getRemNum(6rem);
        }
      }

      .user-dynamic-text-operation-transpond {
        .user-dynamic-text-operation-transpond-icon {
          @include size(16rem, 18rem);
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/transpond%403x.png") no-repeat center center;
          background-size: contain;
        }

        p {
          margin-left: getRemNum(8rem);
        }
      }

      p {
        line-height: getRemNum(20rem);
        color: #999;
        font-size: getRemNum(14rem);
        font-family: PingFangSC-Regular, PingFang SC;
      }
    }
  }
}

#back {
  width: getRemNum(56rem);
  height: getRemNum(56rem);
  border-radius: 50%;
  background: linear-gradient(135deg, #4279FD 0%, #89B1FF 100%);
  position: fixed;
  z-index: 1000;
  right: getRemNum(16rem);
  bottom: getRemNum(85rem);
  font-size: getRemNum(16rem);
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  line-height: getRemNum(56rem);
  text-align: center;
  letter-spacing: getRemNum(0.8rem);
}

.school-year-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .08);

  .each-school-year {
    background: #fff;
    width: getRemNum(126rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: getRemNum(8rem);
    position: relative;
    top: getRemNum(70rem);
    left: getRemNum(223rem);
    z-index: 10;

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: getRemNum(-9rem);
      left: getRemNum(80rem);
      z-index: 5;
      background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Pointed.png") no-repeat;
      background-size: contain;
      @include size(27rem, 21rem);
    }

    label {
      @include size(105rem, 42rem);
      padding: getRemNum(7rem);
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333333;
      font-size: getRemNum(16rem);
      font-family: PingFangSC-Regular, PingFang SC;
      letter-spacing: getRemNum(0.8rem);
    }
  }
}

.share-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .08);
  display: none;

  .share-box-text {
    width: getRemNum(271rem);
    height: getRemNum(248rem);
    background: #fff;
    border-radius: getRemNum(12rem);
    padding: getRemNum(21rem) getRemNum(16rem);
    box-sizing: border-box;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .share-box-text-header {
      height: getRemNum(32rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: getRemNum(14rem);
      font-family: PingFangSC-Regular, PingFang SC;
      color: #161516;
      letter-spacing: getRemNum(0.7rem);
    }

    .share-box-text-content {
      width: getRemNum(239rem);
      height: getRemNum(42rem);
      font-size: getRemNum(12rem);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #161516;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      margin: getRemNum(16rem) 0;
      overflow: hidden;
    }

    .share-box-text-information {
      margin-top: getRemNum(86rem);

      .share-box-text-username {
        font-size: getRemNum(14rem);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #161516;
        margin-bottom: getRemNum(4rem);
      }

      & > section:nth-child(2) {
        display: flex;
        justify-content: space-between;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
        font-size: getRemNum(12rem);

        .share-box-text-time {
          letter-spacing: getRemNum(0.6rem);
        }

        .share-box-text-address {
          min-width: getRemNum(71rem);
          text-align: center;
          white-space: nowrap;
        }
      }
    }

    .share-box-text-QRcode {
      position: absolute;
      right: getRemNum(16rem);
      bottom: getRemNum(60rem);
      width: getRemNum(68rem);
      height: getRemNum(68rem);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .share-box-images {
    width: getRemNum(275rem);
    height: getRemNum(449rem);
    background: #fff;
    border-radius: getRemNum(12rem);
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: getRemNum(12rem);
    padding: getRemNum(21rem) getRemNum(18rem);
    box-sizing: border-box;

    .share-box-images-header {
      height: getRemNum(32rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: getRemNum(14rem);
      font-family: PingFangSC-Regular, PingFang SC;
      color: #161516;
      letter-spacing: getRemNum(0.7rem);
    }

    .share-box-images-content-image {
      margin: getRemNum(16rem) 0;
      width: getRemNum(239rem);
      height: getRemNum(239rem);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .share-box-images-content-text p {
      width: getRemNum(145rem);
      height: getRemNum(51rem);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      font-size: getRemNum(12rem);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #161516;
      line-height: getRemNum(17rem);
    }

    .share-box-images-information {
      margin: getRemNum(18rem) 0 0;

      .share-box-images-username {
        font-size: getRemNum(14rem);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #161516;
        margin-bottom: getRemNum(4rem);
      }


      & > section:nth-child(2) {
        display: flex;
        justify-content: space-between;

        .share-box-images-time {
          font-size: getRemNum(12rem);
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999999;
          letter-spacing: getRemNum(0.6rem);
        }

        .share-box-images-address {
          min-width: getRemNum(71rem);
          font-size: getRemNum(12rem);
          text-align: center;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999999;
          letter-spacing: getRemNum(0.6rem);
          white-space: nowrap;
        }
      }
    }

    .share-box-images-QRcode {
      position: absolute;
      right: getRemNum(18rem);
      bottom: getRemNum(53rem);
      width: getRemNum(68rem);
      height: getRemNum(68rem);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}